<!-- 积分记录 -->
<template>
	<view class="page" :style="{'--color': color}">
		<status-bar :title="nameDefinition.fenTitle+'明细'"></status-bar>
		<backTop v-if='toTop'></backTop>
		<view class="headBox thmeBg">
			<image :src="staticUrl+'/images/integralRecord.png'" mode="aspectFill"
				style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;"></image>
			<view class="recentMonth flex-box align-center">
				<text class="iconfont icon-xiangzuo" :class="{conotClick:currentIndex==0}" @click="prevMonth"></text>
				<swiper class="swiper flex" display-multiple-items='3' @change="swiperChange" :current="currentIndex"
					:disable-touch='true'>
					<swiper-item>
						<view class="swiper-item"> </view>
					</swiper-item>
					<swiper-item v-for="(item,index) in date" :key='index'>
						<view class="swiper-item" :class="{
							active:currentIndex == index
							}" @click="tapMonth(index)">{{item.name}}</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item"> </view>
					</swiper-item>
				</swiper>
				<text class="iconfont icon-xiangyouxiayiye" :class="{conotClick:currentIndex==11}"
					@click="nextMonth"></text>
			</view>
			<view class="tatalIntegral flex-box">
				<text>总{{nameDefinition.fenTitle}}：</text>
				<text class="weight">{{integral}}</text>
			</view>
			<view class="tatalIntegral1 flex-box align-center">
				<text>本月总收入：{{earn}}</text>
				<text class="midLine"></text>
				<text>本月总消耗：{{use}}</text>
			</view>
		</view>
		<!-- 积分明细 -->
		<view class="recordBox">
			<view class="recordListTitle">{{nameDefinition.fenTitle}}收支明细</view>
			<view class="underline"></view>
			<view class="recordList" v-if='recordList.length > 0'>
				<block v-for="(item,index) in recordList" :key="index">
					<view class="recordItem flex-box flex-between align-center">
						<view class="recordLeft flex">
							<view class="recordName">{{item.title}}</view>
							<view class="recordDate">{{item.addDate}}</view>
						</view>
						<view>
							<text class="increase success-color" v-if='item.status == 1'>+{{item.jifen}}</text>
							<text class="decrease error-color" v-else>-{{item.jifen}}</text>
						</view>
					</view>
					<view class="underline"></view>
				</block>
				<view class="DiLine" v-if='recordList && recordList.length > 0 && !more'>----- 我也是有底线的 -----</view>
			</view>
			<empty type='1' cat='4' v-else :msg='"没有相关记录,签到就可以获得"+nameDefinition.fenTitle+"哦 ~"'></empty>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'

	export default {
		data() {
			return {

				toTop: false,
				currentIndex: 11,
				recordList: [],
				integral: 0,
				earn: 0,
				use: 0,
				staticUrl: this.staticUrl,
				page: 1,
				more: false,

				date: [],
				noData: false
			}
		},
		onLoad() {

			let year = new Date().getFullYear();
			let month = new Date().getMonth() + 1;
			for (var i = 0; i < 12 - month; i++) { // 去年
				this.date.push({
					year: year - 1,
					month: i + month + 1 < 10 ? '0' + (i + month + 1) : i + month + 1,
					name: i + month + 1 + '月'
				})
			}
			for (var i = 0; i < month; i++) { // 今年
				this.date.push({
					year: year,
					month: i + 1 < 10 ? '0' + (i + 1) : i + 1,
					name: i + 1 + '月'
				})
			}
			this.currentIndex = this.date.length - 1
			this.getRecord(false);
			this.$BarTitle(`${this.nameDefinition.fenTitle}明细`)

		},

		methods: {
			getRecord(flag) {
				this.more = false;
				if (!flag) {
					this.recordList = []
					this.page = 1
				}
				this.getUserIntegral()
				this.$http.post({
					url: '/SRA_userIntegral/jifenRecord',
					data: {
						VeriCode: this.bid,
						vId: this.vid,
						Y: this.date[this.currentIndex].year,
						M: this.date[this.currentIndex].month,
						pageIndex: this.page,
						pageSize: 20,
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.msg)
					const result = res.data || []
					this.recordList = this.recordList.concat(result);
					if (result && result.length > 19) {
						this.more = true
						this.page++
					}
					if (this.recordList.length < 1) {
						this.noData = true
					}
					uni.hideLoading()
				})
			},

			swiperChange(e) {
				console.log(e);
			},
			getUserIntegral() {
				this.$http.post({
					url: '/SRA_userIntegral/thisMonthJifen',
					data: {
						VeriCode: this.bid,
						vId: this.vid,
						Y: this.date[this.currentIndex].year,
						M: this.date[this.currentIndex].month,
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.msg)
					const result = res.data;
					this.integral = result.jifen
					this.earn = result.gainJifen;
					this.use = result.minusJifen;
				})
			},
			tapMonth(index) {
				if (index == this.currentIndex) {
					return
				}
				if (index < this.currentIndex + 1) {
					this.prevMonth()
				}
				if (index > this.currentIndex) {
					this.nextMonth()
				}
			},
			prevMonth() {
				if (this.currentIndex > 0) {
					this.currentIndex--
					uni.showLoading({
						title: '加载中'
					})
					this.getRecord(false);
				}
			},
			nextMonth() {
				if (this.currentIndex < 11) {
					this.currentIndex++
					uni.showLoading({
						title: '加载中'
					})
					this.getRecord(false);
				}
			}
		},
		computed: {
			...mapState(['color', 'nameDefinition', 'vid', 'share', 'bid'])
		},
		onShareAppMessage(res) {
			return {
				title: this.share.title,
				desc: this.share.desc,
				path: '/pages/index/index?share_v_id=' + this.vid,
				imageUrl: this.share.imageUrl
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 300) {
				this.toTop = true
			} else {
				this.toTop = false
			}
		},
		onReachBottom() {
			if (this.more) {
				this.getRecord(true);
			}
		},
	}
</script>

<style scoped lang="scss">
	.underline {
		height: 1px;
		background-color: #EEEEEE;
	}

	.icon-xiangyouxiayiye,
	.icon-xiangzuo {
		color: white;
		font-size: 28rpx;
	}

	.headBox {
		padding: 24rpx 36rpx;
		position: relative;
	}

	.recentMonth {
		margin: 0 46rpx 0 46rpx;
		height: 52rpx;
		background: rgba(255, 255, 255, .2);
		border-radius: 52rpx;
		padding: 0 26rpx;
		position: relative;
		z-index: 33;
	}

	.swiper {
		height: 100%;
		margin: 0 14rpx;
	}

	.swiper swiper-item {
		text-align: center;
		line-height: 52rpx;
	}

	.swiper-item {
		color: white;
		font-size: 24rpx;
	}

	.icon-jiantouyou {
		color: white;
		font-size: 28rpx;
	}

	.icon-jiantouyou:nth-last-of-type(2) {
		transform: rotate(180deg);
	}

	/* 当前查看的月份 */
	.swiper-item.active {
		font-size: 36rpx;
	}

	/* 未来的月份 */
	.swiper-item.future {
		opacity: .6;
	}

	.conotClick {
		opacity: .4;
	}

	.tatalIntegral {
		justify-content: center;
		align-items: flex-end;
		margin: 20rpx 0;
	}

	.tatalIntegral text {
		font-size: 32rpx;
		color: white;
	}

	.tatalIntegral .weight {
		font-size: 56rpx;
		color: white;
		font-weight: bold;
		margin-bottom: -8rpx;
	}

	.tatalIntegral1 {
		justify-content: center;
		align-items: flex-end;
	}

	.tatalIntegral1 text {
		color: white;
	}

	.midLine {
		display: inline-block;
		margin: 0 30rpx;
		width: 2rpx;
		height: 34rpx;
		background-color: white;
		transform: scale(0.5);
	}

	/* 日历 */
	.recordListTitle {
		text-align: center;
		color: #232323;
		font-size: 32rpx;
		line-height: 80rpx;
	}

	.recordItem {
		padding: 24rpx 36rpx;
	}

	.recordLeft {
		margin-right: 20rpx;
	}

	.recordDate {
		color: #999999;
		font-size: 20rpx;
	}

	.recordName {
		color: #232323;
		margin-bottom: 10rpx;
	}

	.increase {
		font-size: 36rpx;
		padding: 0;
	}

	.decrease {
		font-size: 36rpx;
	}
</style>